﻿<script lang="ts" setup>
import { ref } from 'vue'
import { Empty } from 'ant-design-vue'
import { getEnumDisplayName } from '@/utils/enum'
import { formatToDateTime } from '@/utils/dateUtil'
import useCol from '@/hooks/system/useCol'
import { useDrawer } from '@/hooks/system/useDrawer'
import { ApprovalStatus, approvalStatusOptions } from '@/types/modules/approval-status'
import AssetsDetail from '@/views/fixed-assets/detail.vue'
import ConsumerDetail from '@/views/user/detail.vue'

defineProps({
  isItem: { type: Boolean, default: false },
  itemData: Object
})
const { getBindColumn } = useCol()

const {
  visible: relateVisible,
  currentItem: relateCurrentItem,
  onShow: onShowRelate
} = useDrawer()

const relateComps = {
  assets: AssetsDetail,
  consumer: ConsumerDetail,
}

const relateAttrName = ref<string>('')
const relateTitle = ref<string>('')
const onCheckRelate = (attrName: string, title: string, relate: any) => {
  relateAttrName.value = attrName
  relateTitle.value = title
  onShowRelate(relate)
}
</script>

<template>
  <div :class="['detail-wrapper', { isChild: isItem }]">
    <a-card class="basic-content">
      <a-descriptions v-bind="getBindColumn">        
        <a-descriptions-item label="资产">
          <a type="link" style="padding: 0" @click="
            onCheckRelate(
              'assets',
              itemData?.assets?.name,
              itemData?.assets
            )
          ">{{ itemData?.assets?.name }}</a>
        </a-descriptions-item>
        <a-descriptions-item label="使用地点">{{
            itemData?.useLocation
        }}</a-descriptions-item>
        <a-descriptions-item label="备注">{{
            itemData?.remark
        }}</a-descriptions-item>
        <a-descriptions-item label="领用人">
          <a type="link" style="padding: 0" @click="
            onCheckRelate(
              'consumer',
              itemData?.consumer?.name,
              itemData?.consumer
            )
          ">{{ itemData?.consumer?.name }}</a>
        </a-descriptions-item>
        <a-descriptions-item label="归还中">
          <div v-if="itemData?.returning != null">
            <a-switch v-model:checked="itemData.returning" :disabled="true" />
          </div>
          <span v-else-if="itemData?.status != ApprovalStatus.Passed">
            <a-typography-text type="secondary">-</a-typography-text>
          </span>
          <span v-else>
            <a-typography-text type="secondary">已归还</a-typography-text>
          </span>
        </a-descriptions-item>
        <a-descriptions-item label="审批状态">{{            
            getEnumDisplayName(itemData?.status, approvalStatusOptions)
        }}</a-descriptions-item>
        <a-descriptions-item label="创建日期">{{
          formatToDateTime(itemData?.createdDate)
          }}</a-descriptions-item>
      </a-descriptions>
    </a-card>

    <a-drawer v-model:visible="relateVisible" :title="relateTitle" :push="false" width="40vw" placement="right">
      <component :is="relateComps[relateAttrName]" :item-data="relateCurrentItem" />
    </a-drawer>
  </div>
</template>

<style lang="less" scoped>
.detail-wrapper {
  .ant-card {
    margin: 24px;

    &:last-child {
      margin-bottom: 0;
    }
  }

  .basic-content {
    margin: 0;
    border-radius: 0;
    border: 0;

    :deep(.ant-card-body) {
      padding: 0;
    }
  }

  :deep(.ant-card-head) {
    padding-left: 0;

    &-title {
      font-weight: 600;
    }
  }

  :deep(.ant-descriptions) {
    tbody>tr:last-child td {
      padding-bottom: 0;
    }
  }
}
</style>
